<template>
    <div class="container">
        <el-row>
            <el-card shadow="never">
                <div slot="header">
                    <!--添加配置项按钮区-->
                    <div class="ub main-right">
                        <el-form :inline="true" size="small">
                            <el-form-item class="el-search-item">
                                <el-button v-if='hasPerm("sys:config:add")'  plain icon="el-icon-plus" @click="openDialog()">添加配置项</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <!--配置项列表区-->
                <el-tabs v-model="activeValue" @tab-click="handleClick()" type="card" :tab-position="tabPosition">
                    <el-tab-pane v-for="item in categoryData" :label="item.name" :name="item.name">
                        <el-table :data="tableData" :height="tableHeight" style="width: 100%">
                            <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
                            <el-table-column prop="category" label="参数类型" align="center" width="200"></el-table-column>
                            <el-table-column prop="name" label="参数名称" align="center" width="150"></el-table-column>
                            <el-table-column prop="k" label="参数key" align="center"></el-table-column>
                            <el-table-column prop="v" label="参数value" align="center"></el-table-column>
                            <el-table-column prop="enabled" label="状态" align="center" width="80">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.enabled === false" size="small" type="danger">未启用</el-tag>
                                    <el-tag v-else size="small" type="success">已启用</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                            <el-table-column v-if='hasPerm("sys:config:update") || hasPerm("sys:config:del")' label="更多操作" align="center" width="250">
                                <template slot-scope="scope">
                                    <el-button v-if='hasPerm("sys:config:update")' @click="openUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
                                    <el-button v-if='hasPerm("sys:config:del")' @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>

                <!--配置项弹框-->
                <el-drawer
                    :title="dialog.dialogTitle"
                    :visible.sync="dialog.visible"
                    :direction="dialog.direction"
                    :size="size"
                    :before-close="handleClose"
                >
                    <el-row class="drawer-table">
                        <el-col :span="24">
                            <el-form :rules="rules" ref="configForm" :model="configForm" size="small" label-width="80px">
                                <el-form-item prop="category" label="配置类型">
                                    <el-input v-model="configForm.category" readonly auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="name" label="配置名称">
                                    <el-input v-model="configForm.name" placeholder="请输入配置参数名称" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="k" label="参数标识">
                                    <el-input v-model="configForm.k" placeholder="请输入配置参数key" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="v" label="参数值">
                                    <el-input v-model="configForm.v" placeholder="请输入配置参数value" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="drawer-footer">
                        <el-col :span="24">
                            <el-button @click="dialog.visible = false" size="small">取 消</el-button>
                            <el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
                        </el-col>
                    </el-row>
                </el-drawer>
            </el-card>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeValue: '系统主题配置',
            size: '25%',
            tabPosition: 'top',
            handleClose(done) {
                this.resetForm()
                done()
            },
            dialog: {
                flag: 0,
                dialogTitle: "",
                visible: false,
                direction: 'rtl'
            },
            loading: {
                status: false,
                BtnText: '确 定',
                SubText: '提交中...'
            },
            categoryData: [],
            // 表格数据
            tableData: [],
            // 表格高度
            tableHeight: 0,
            // 配置对象
            configForm: {
                id: null,
                name: null,
                category: null,
                k: null,
                v: null
            },
            rules: {
                name: [{required: true, trigger: "change",  message: "请输入配置参数名称"}],
                k: [{required: true, trigger: "change",  message: "请输入配置参数标识key"}],
                v: [{required: true, trigger: "change",  message: "请输入配置参数值value"}]
            }
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 250;
        });
    },
    created() {
        this.getCategoryList()
        this.getDataList()
    },
    methods: {
        // 获取系统初始化数据
        getCategoryList() {
            this.$api.init.getInitCategoryData().then(res => {
                if(res.data.code === 2000) {
                    this.categoryData = res.data.data
                }
            })
        },
        // 获取参数配置列表
        getDataList() {
            this.$api.init.list({
                category: this.activeValue
            }).then(res => {
                if(res.data.code === 2000) {
                    this.tableData = res.data.data
                }
            })
        },
        // 添加按钮操作
        openDialog() {
            this.dialog.flag = 0
            this.resetForm("configForm")
            this.dialog.dialogTitle = "新增参数配置"
            this.dialog.visible = true
            this.configForm.category = this.activeValue
        },
        // 更新按钮操作
        openUpdate(row) {
            this.dialog.flag = 1
            this.resetForm("configForm")
            this.dialog.dialogTitle = "编辑参数配置"
            this.dialog.visible = true
            this.configForm.category = row.category
            this.configForm.id = row.id
            this.configForm.name = row.name
            this.configForm.k = row.k
            this.configForm.v = row.v
        },
        // 提交配置数据
        submitFun() {
            this.$refs.configForm.validate(valid => {
                if(valid){
                    this.loading.status = true
                    this.$api.init.saveOrUpdate(this.configForm,this.dialog.flag).then(res => {
                        if (res.data.code === 2000) {
                            this.$message.success(res.data.msg)
                            this.getDataList()
                            this.dialog.visible = false
                            this.loading.status = false
                        }else{
                            this.$message.error(res.data.msg)
                            this.loading.status = false
                            return false
                        }
                    })
                }
            })
        },
        // 删除按钮操作
        deleteFun(row) {
            this.$confirm("确定删除当前配置项吗？", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: 'error'
            }).then(() =>{
                this.$api.init.remove(row.id).then(res => {
                    if(res.data.code === 2000){
                        this.$message.success(res.data.msg)
                        this.getDataList()
                    }else {
                        this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => {
                this.$message.info("取消删除")
            });
        },
        handleClick(tab) {
            this.getDataList()
        },
        // 清空表单
        resetForm(formName) {
            if (this.$refs[formName]) {
                this.$refs[formName].resetFields();
            }
        }
    }
}
</script>

<style lang="less" scoped>
.el-search-item {
    margin-bottom: 0;
}
.el-card/deep/.el-card__body {
    padding: 0 10px 10px 10px !important;
}
.el-card/deep/.el-card__header {
    border-bottom: none !important;
}

</style>
